<template>
  <div class="new_playlist" @click.self="colse()">
    <div class="main">
      <div class="top">新建歌单</div>
      <div class="input">
        <input
          type="text"
          maxlength="40"
          placeholder="请输入歌单标题"
          v-model="value"
          @input="descInput"
          @blur="blur()"
          @focus.once="focus()"
          ref="title"
          autofocus
        />
        <i v-show="num" @click.self="empty()"></i>
      </div>
      <div class="set">
        <div class="left">
          <i :class="isOption?'optionTrue':'option'" @click.self="clickOption()"></i>
          <span>设置为隐私歌单</span>
        </div>
        <div class="right">
          <div class="num">{{num}}/40</div>
        </div>
      </div>
      <div class="btnBox">
        <button class="commit" @click.self="submit()" :class="value?'':'opc'">提交</button>
        <button class="cancle" @click.self="colse()">取消</button>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: ["name", "songId"],
  data() {
    return {
      num: 0, //字数
      value: "", //歌单标题内容
      isOption: 0 //是否选中
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    // 提交事件
    submit() {
      if (this.value) {
        this.$store
          .dispatch("create_playlist/getCreatePlaylist", {
            name: this.value,
            privacy: this.isOption
          })
          .then(data => {
            this.$store.dispatch("playlist_tracks/getPlaylistTracksData", {
              op: "add",
              pid: data.id,
              tracks: this.songId
            }).then((res)=>{
              this.$emit("tracksSuccess");
            });
            this.$emit("colseNewPlaylist");
            this.$emit("colseUserPlaylist");
          });
      }
    },
    // 清空input
    empty() {
      this.value = "";
      this.num = 0;
    },
    // 聚焦事件
    focus() {
      event.currentTarget.select();
    },
    // 歌单标题初始化
    init() {
      this.value = this.name;
      this.num = this.value.length;
    },
    // 关闭当前弹窗
    colse() {
      this.$emit("colseNewPlaylist");
    },
    // 失焦页面后还原
    blur() {
      window.scrollTo(0, 0);
    },
    // 设置隐私歌单
    clickOption() {
      if (this.isOption) {
        this.isOption = 0;
      } else {
        this.isOption = 10;
      }
    },
    // 输入字数
    descInput() {
      this.num = this.value.length;
    }
  }
};
</script>
<style lang="scss" scoped>
.new_playlist {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  z-index: 1002;
  background-color: rgba($color: #000000, $alpha: 0.5);
  .main {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    width: 80%;
    border-radius: 0.2rem;
    padding: 0 0.3rem;
    .top {
      overflow: hidden;
      line-height: 1.2rem;
      color: #333;
      font-size: 0.36rem;
      font-weight: 900;
      text-align: left;
    }
    .input {
      position: relative;
      width: 100%;
      border-bottom: 0.02rem solid #ccc;
      text-align: left;
      input {
        padding: 0.2rem 0;
        border: 0;
        border-radius: 0;
        width: 90%;
        padding-left: 0.1rem;
      }
      i {
        display: inline-block;
        width: 0.4rem;
        height: 0.4rem;
        background: url(../images/a_c.png) no-repeat;
        background-size: 100% 100%;
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0.05rem;
        margin: auto;
      }
    }
    .set {
      text-align: left;
      overflow: hidden;
      .left {
        float: left;
        i {
          display: inline-block;
          padding: 0.1rem;
          width: 0.5rem;
          height: 0.5rem;
          vertical-align: middle;
        }
        i.option {
          background: url(../images/a1i.png) no-repeat;
          background-size: 100% 100%;
          -webkit-filter: contrast(0%) opacity(50%);
          filter: contrast(0%) opacity(50%);
        }
        i.optionTrue {
          background: url(../images/a48.png) no-repeat;
          background-size: 100% 100%;
        }
        span {
          display: inline-block;
          vertical-align: middle;
          font-size: 0.3rem;
          color: #888;
        }
      }
      .right {
        float: right;
        line-height: 0.7rem;
        .num {
          float: right;
          font-size: 0.3rem;
          color: #333;
        }
      }
    }
    .btnBox {
      overflow: hidden;
      button.opc {
        opacity: 0.5;
      }
      button {
        float: right;
        border: 0;
        line-height: 1.2rem;
        color: #ff2d0f;
        font-size: 0.34rem;
        background-color: transparent;
      }
    }
  }
}
</style>